<style>
  
  .r-enter,.r-leave{
    transition: all 1.2s;
  }
  .r-enter{
    opacity: 0;
  }
  .r-enter-active{
    opacity: 1;
  }
  .r-leave{
    opacity: 1;
  }
  .r-leave-active{
    opacity: 0;
  }

</style>
<script src="../../dist/regular.js"></script>

<div id="app"></div>
<!-- Templates -->
<script id="example" type="text/regular">

<a href="#" on-click={{username=username? "":"leeluolee"}}>login</a>

{{#if username}}
  <h2 r-animate='#'>My Name is {{username}}</h2>
{{#else}}
  <h2>My Name is null</h2>
{{/if}}


<input type="text" r-model={{draft}} on-enter={{users.push(draft)}}>
{{#list users as user}}
<div r-animate>{{user}}</div>
<div>{{user}}</div>
<a href="#" on-click={{users.splice($index,1)}}>REMOVE</a>
{{/list}}
</script>


<script>
var App = Regular.extend({
  template: '#example',
  push: function(draft,users){
    users.push(draft)
  }
});

var app = new App({
  data: {
    users:[]
  }
}).inject("#app");

var Slider = Regular.extend({
  
  nav: function(index){
    var data = this.data;
    data.index = index;
  },
  next: function(){
    var data = this.data,
      slides = data.slides;
    if(data.index + 1 >= slides.length) data.index = 1;

  },
  prev: function(){
    var data = this.data,
      slides = data.slides;
    if(data.index - 1 < 0) data.index = slides.length - 1;
  },
  add: function(){

  }
})

</script>
